{% extends "base.html" %}
{% load i18n %}
<body>
{% block detail %}

    <div class="main">
        <div class="login register">
            <h2>{% trans 'Register' %}<em>(<i><font color="red">*</font></i>{% trans 'is required' %})</em></h2>

            <form action="/signup/" id="signupform" method="post" class="nice" action="create">{% csrf_token %}

                <div id="validate" class="worn">
                    {% if error %}
                        {{ error }}
                    {% endif %}
                    {{ form.username.errors }}
                    {{ form.email.errors }}
                </div>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Email' %}：</dt>
                    {% if form.email.value %}
                        <dd><input name="email" id="email" value="{{ form.email.value }}" class="text"/></dd>
                    {% else %}
                        <dd><input name="email" id="email" class="text"/></dd>
                    {% endif %}
                </dl>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Nickname' %}：</dt>
                    {% if form.username.value %}
                        <input name="username" type="text" value="{{ form.username.value }}" id="username"
                               class="text"/>
                    {% else %}
                        <dd><input type="text" name="username" id="username" class="text"/></dd>
                    {% endif %}
                </dl>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Password' %}：</dt>
                    <dd><input type="password" name="password" id="password" class="text"/></dd>
                </dl>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Confirm password' %}：</dt>
                    <dd><input type="password" name="confirmPassword" id="confirmPassword" class="text"/></dd>
                </dl>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Company' %}：</dt>
                    {% if userProfileForm.company.value %}
                        <input name="company" type="text" value="{{ userProfileForm.company.value }}" id="company"
                               class="text"/>
                    {% else %}
                        <dd><input type="text" name="company" id="company" class="text"/></dd>
                    {% endif %}
                </dl>
                <dl class="clearfix">
                    <dt><font color="red">*</font>{% trans 'Industry' %}：</dt>
                    {% if userProfileForm.industry.value %}
                        <input name="industry" type="text" value="{{ userProfileForm.industry.value }}" id="industry"
                               class="text"/>
                    {% else %}
                        <dd><input type="text" name="industry" id="industry" class="text"/></dd>
                    {% endif %}
                </dl>
                <dl class="clearfix">
                    <dt>{% trans 'Scale' %}：</dt>
                    {% if userProfileForm.scale.value %}
                        <input name="scale" type="text" value="{{ userProfileForm.scale.value }}" id="scale"
                               class="text"/>
                    {% else %}
                        <dd><input type="text" name="scale" id="scale" class="text"/></dd>
                    {% endif %}
                </dl>
                <dl class="clearfix">
                    <dt>{% trans 'Position' %}：</dt>
                    {% if userProfileForm.position.value %}
                        <input name="position" type="text" value="{{ userProfileForm.position.value }}" id="position"
                               class="text"/>
                    {% else %}
                        <dd><input type="text" name="position" id="position" class="text"/></dd>
                    {% endif %}
                </dl>
                <div class="btnLine"><input type="button" onclick="check()" value="{% trans 'Submit' %}"/></div>
            </form>
        </div>
    </div>

{% endblock %}
</body>
{% block js %}
    <script>
        function check() {

            if ($("#email").val() == '') {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("邮箱为必需项!");
                {% else %}
                    $("#validate").html("The email is required!");
                {% endifequal %}
                return false;
            }
            if ($("#username").val() == '') {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("昵称为必需项!");
                {% else %}
                    $("#validate").html("The nickname is required!");
                {% endifequal %}
                return false;
            }
            if ($("#username").val().length > 30) {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("昵称不超过30个字符!");
                {% else %}
                    $("#validate").html("The nickname is not more than 30 characters!");
                {% endifequal %}
                return false;
            }
            if ($("#password").val() == '') {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("密码为必需项!");
                {% else %}
                    $("#validate").html("The password is required!");
                {% endifequal %}
                return false;
            }
            if ($("#confirmPassword").val() == '') {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("确认密码为必需项!");
                {% else %}
                    $("#validate").html("The confirm password is required!");
                {% endifequal %}
                return false;
            }
            if ($("#password").val() != $("#confirmPassword").val()) {
                $("#validate").empty();
                {% ifequal LANGUAGE_CODE 'zh-cn' %}
                    $("#validate").html("密码及密码确认必须相同!");
                {% else %}
                    $("#validate").html("Password and confirmation password must be the same!");
                {% endifequal %}
                return false;
            }
            if ($("#company").val() == '') {
                $("#validate").empty();
            {% ifequal LANGUAGE_CODE 'zh-cn' %}
                $("#validate").html("公司名称为必需项!");
            {% else %}
                $("#validate").html("The company is required!");
            {% endifequal %}
                return false;
            }
            if ($("#industry").val() == '') {
                $("#validate").empty();
            {% ifequal LANGUAGE_CODE 'zh-cn' %}
                $("#validate").html("行业为必需项!");
            {% else %}
                $("#validate").html("The industry is required!");
            {% endifequal %}
                return false;
            }
            $("#signupform").submit();
        }
    </script>
{% endblock %}
</html>